import Vue, { defineComponent } from 'vue';

const ButtonCounter = defineComponent({
    props: ["count"],
    emits: ['change'],
    methods: {
        onClick() {
            this.$emit("change", this.count + 1);
        },
    },
    render() {
        return (
            <button onClick={this.onClick} {...this.$attrs}>
                You clicked me {this.count} times.
            </button>
        );
    },
});

export default defineComponent({
    data() {
        return {
            allCount: 0,
        };
    },
    methods: {
        onChange(val: number): void {
            this.allCount = val;
        },
    },
    render(): Vue.VNode {
        return (
            <div>
                <ButtonCounter
                    count={this.allCount}
                    type="button"
                    onChange={this.onChange}
                />
                <ButtonCounter
                    count={this.allCount}
                    type="button"
                    domPropsInnerHTML={`hello ${this.allCount}.`}
                    onChange={this.onChange}
                />
            </div>
        );
    },
});
